<!DOCTYPE html>
<html>
    <head>
        <title>Temperature</title>
        <meta charset="UTF-8">
        <link rel="shortcut icon" href="custom/images/favicon.ico?v=2" />
        <style>
            html, body {
                padding: 0px;
                margin: 0px;
            }
        </style>

        <script src='custom/configs/htconfig.js'></script>
        <script src='libs/ht.js'></script>

        <script>
            function init() {
                dataModel = new ht.DataModel();
                graphView = new ht.graph.GraphView(dataModel);
                graphView.addToDOM();

                ht.Default.xhrLoad('previews/display.json', function(text) {
                    var json = ht.Default.parse(text);
                    if (json.title) document.title = json.title;
                    dataModel.deserialize(json);

                    temperatures = {
                        'M001': 10,
                        'M002': 30,
                        'M003': 60
                    };

                    setInterval(function(){
                        // update temperatures
                        for (var id in temperatures) {
                            temperatures[id]++;
                            if (temperatures[id] > 100) temperatures[id] = 0;
                        }
                        // update datas
                        dataModel.each(function(data) {
                            var dataBindings = data.getDataBindings();
                            if (dataBindings) {
                                // update attrs
                                for (var name in dataBindings.a) {
                                    var db = dataBindings.a[name];
                                    var value = temperatures[db.id];
                                    if (db.func) {
                                        value = db.func(value);
                                    }
                                    data.a(name, value);
                                }
                                // update styles
                                for (var name in dataBindings.s) {
                                    var db = dataBindings.s[name];
                                    var value = temperatures[db.id];
                                    if (db.func) {
                                        value = db.func(value);
                                    }
                                    data.s(name, value);
                                }
                                // update properties
                                for (var name in dataBindings.p) {
                                    var db = dataBindings.p[name];
                                    var value = temperatures[db.id];
                                    if (db.func) {
                                        value = db.func(value);
                                    }
                                    data[ht.Default.setter(name)](value);
                                }
                            }
                        });
                    }, 50);
                });
            }

        </script>
    </head>
    <body onload='setTimeout(init, 300)'>
    </body>
</html>
